<template>
  <div>
    订单页面
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="orderVO" class="demo-form-inline">
        <!-- 功能按钮 -->
        <el-form-item style="float: left">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="orderAdd"
          >
            添加订单
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deleteBatchOrder"
          >
            批量删除
          </el-button>
        </el-form-item>
        <!-- 条件 -->
        <el-form-item label="客户名称：">
          <el-input
            v-model="orderVO.cname"
            placeholder="请输入客户名称"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称：">
          <el-input
            v-model="orderVO.gname"
            placeholder="请输入商品名称"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="销售员：">
          <el-input
            v-model="orderVO.creator"
            placeholder="请输入销售员姓名"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="总金额：">
          <el-input
            v-model="orderVO.grossamount"
            placeholder="请输入总金额"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单数量：">
          <el-input
            v-model="orderVO.number"
            placeholder="请输入订单数量"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单状态：">
          <el-select
            v-model="orderVO.state"
            placeholder="请选择订单状态"
            style="width: 160px"
          >
            <el-option label="不限" value=""></el-option>
            <el-option label="待支付" value="待支付"></el-option>
            <el-option label="已退款" value="已退款"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="orderVO.minordertime"
            type="date"
            placeholder="选择最小日期"
            style="width: 160px"
          >
          </el-date-picker>
          &nbsp;
          <el-date-picker
            v-model="orderVO.maxordertime"
            type="date"
            placeholder="选择最大日期"
            style="width: 160px"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-refresh" @click="reset"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
      <el-table
        :data="pageBean.beanList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column fixed type="selection" width="50" align="center"> </el-table-column>
        <el-table-column fixed prop="ordernumber" label="订单号" width="120" align="center">
        </el-table-column>
        <el-table-column fixed prop="client.cname" label="客户名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="goodsEntity.gname" label="商品名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="creator" label="销售员" width="120" align="center">
        </el-table-column>
        <el-table-column prop="earnest" label="已支付金额/元" width="120" align="center">
        </el-table-column>
        <el-table-column prop="unpatdamount" label="未支付金额/元" width="120" align="center">
        </el-table-column>
        <el-table-column prop="grossamount" label="总金额/元" width="120" align="center">
        </el-table-column>
        <el-table-column prop="number" label="订单数量" width="120" align="center">
        </el-table-column>
        <el-table-column prop="ordertime" label="创建时间" width="120" align="center">
        </el-table-column>
        <el-table-column prop="state" label="订单状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.state === '已完成'
                  ? 'success'
                  : scope.row.state === '待支付'
                  ? 'primary'
                  : 'danger'
              "
              disable-transitions
              >{{ scope.row.state }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="收货/退货" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-circle-check"
              @click="delivery(scope.row)"
              v-if="scope.row.state === '待支付'"
              style="float: left"
              >确认收货</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-date"
              @click="refundDetails(scope.row)"
              v-if="scope.row.state === '已退款'"
              style="float: left"
              >退款详情</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-d-arrow-left"
              @click="refund(scope.row)"
              v-if="
                scope.row.state === '待支付' || scope.row.state === '已完成'
              "
              >退货申请</el-button
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="客户详情内容"
              placement="top"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-user"
                @click="clientDetails(scope.row)"
                circle
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品详情内容"
              placement="top"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-goods"
                circle
                @click="goodsDetails(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改订单"
              placement="bottom"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                circle
                @click="modify(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除订单"
              placement="bottom"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                circle
                @click="deleteOrder(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
    </div>

    <!-- 修改弹出框 -->
    <div>
      <el-dialog title="修改订单" :visible.sync="modifyForm" @close="resetForm">
        <el-form :model="orderForm" label-width="180px">
          <el-form-item label="销售员">
            <el-input v-model="orderForm.creator"></el-input>
          </el-form-item>
          <el-form-item label="已支付金额">
            <el-input v-model="orderForm.earnest"></el-input>
          </el-form-item>
          <el-form-item label="总金额">
            <el-input v-model="orderForm.grossamount"></el-input>
          </el-form-item>
          <el-form-item label="订单数量">
            <el-input v-model="orderForm.number"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="orderForm.ordertime"
              type="date"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm">取 消</el-button>
          <el-button type="primary" @click="modifyOrder">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 退货申请弹出框 -->
    <div>
      <el-dialog title="退货申请" :visible.sync="refundForm" @close="resetForm">
        <el-form :model="orderRefundVO" label-width="180px">
          <el-form-item label="退货原因">
            <el-input v-model="orderRefundVO.cause"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm">取 消</el-button>
          <el-button type="primary" @click="refundOrder">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageBean: [],
      pageIndex: 1,
      pageSize: 3,
      orderVO: {},
      multipleSelection: {},
      modifyForm: false,
      orderForm: {},
      refundForm: false,
      orderRefundVO: { cause: "" },
    };
  },
  mounted() {
    this.getOrder();
  },
  methods: {
    //退货详情
    refundDetails(row) {
      this.$router.push({ name: "/refundDetails", params: { rid: row.rid } });
    },

    //退货操作发送请求
    refundOrder() {
      console.log(this.orderRefundVO);
      this.$confirm("您真的要退货吗?😭", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/order/refund", this.orderRefundVO).then((resp) => {
            if (resp.data.code == 200) {
              this.$message("退货成功");
              this.refundForm = false;
              this.getOrder();
            }
          });
        })
        .catch(() => {
          this.$message("已取消退货");
        });
    },

    //退货申请操作
    refund(row) {
      this.refundForm = true;
      this.orderRefundVO = { ...row };
    },

    //收货操作
    delivery(row) {
      this.$confirm("此操作将确认收货, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/order/delivery", row).then((resp) => {
            if (resp.data.code == 200) {
              this.$message("收货成功");
              this.getOrder();
            }
          });
        })
        .catch(() => {
          this.$message("已取消收货");
        });
    },

    //批量删除
    deleteBatchOrder() {
      if (this.multipleSelection.length > 0) {
        let oids = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          oids.push(this.multipleSelection[i].oid);
        }
        console.log(oids);

        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios.post("/order/removeBatch", oids).then((resp) => {
              if (resp.data.code == 200) {
                this.$message("删除成功");
                this.getOrder();
              } else {
                this.$message.error(resp.data.msg);
              }
            });
          })
          .catch(() => {
            this.$message("已取消删除");
          });
      } else {
        this.$message("请选择");
      }
    },

    //获取选择的oid放入数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //添加订单
    orderAdd() {
      this.$router.push("/orderAdd");
    },

    //重置按钮
    reset() {
      this.orderVO = {};
      this.getOrder();
    },

    //删除订单
    deleteOrder(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/order/remove?oid=" + row.oid).then((resp) => {
            if (resp.data.code == 200) {
              this.$message("删除成功");
              this.getOrder();
            } else {
              this.$message.error(resp.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message("已取消删除");
        });
    },

    //修改订单按钮
    modify(row) {
      console.log(row);
      this.modifyForm = true;
      this.orderForm = { ...row };
    },

    //修改订单操作
    modifyOrder() {
      if (this.orderForm.earnest == 0) {
        //this.modifyForm = false;
        this.$prompt("请输入退货原因", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            //this.orderRefundVO.cause = value;
            this.orderRefundVO = { ...this.orderForm, cause: value };
            console.log(this.orderRefundVO);
            //发送退货请求
            this.$axios
              .post("/order/refund", this.orderRefundVO)
              .then((resp) => {
                if (resp.data.code == 200) {
                  this.$message("退货成功");
                }
              });

            //发送修改订单请求
            this.$axios.post("/order/modify", this.orderForm).then((resp) => {
              if (resp.data.code == 200) {
                this.$message("修改成功");
                this.modifyForm = false;
                this.getOrder();
              }
            });
          })
          .catch(() => {
            this.$message("取消输入");
          });
      } else {
        this.$axios.post("/order/modify", this.orderForm).then((resp) => {
          if (resp.data.code == 200) {
            this.$message("修改成功");
            this.modifyForm = false;
            this.getOrder();
          }
        });
      }
    },

    //重置修改
    resetForm() {
      this.modifyForm = false;
      this.orderForm = {};
      this.refundForm = false;
      this.orderRefundVO = { cause: "" };
    },

    //商品详情
    goodsDetails(row) {
      this.$router.push({ name: "/goodsDetails", params: { gid: row.gid } });
    },

    //客户详情
    clientDetails(row) {
      this.$router.push({ name: "/clientDetails", params: { cid: row.cid } });
    },

    //条件查询订单
    onSubmit() {
      this.pageIndex = 1;
      this.getOrder();
    },

    //查询所有订单
    getOrder() {
      this.$axios
        .post(
          "/order/getAll/" + this.pageIndex + "/" + this.pageSize,
          this.orderVO
        )
        .then((resp) => {
          if (resp.data.code == 200) {
            this.pageBean = resp.data.data;
          }
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrder();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOrder();
    },
  },
};
</script>

<style>
</style>